<template>
	<!-- <div style="display: flex;">
		<h2><el-button @click="goback" style="margin: 20px 20px;">返回</el-button>添加/编辑分销等级</h2>
	</div> -->
	<div style="display: flex;align-items: center;margin-bottom: 20px;">
		<span style="margin-right: 10px;cursor: pointer;display: flex;align-items: center;" @click="back">
			<el-icon><ArrowLeft /></el-icon>
			<span @click="goback">返回</span>
			<span style="margin-left: 10px;">|</span>
		</span>
		<h3 style="margin-bottom: 0px;">添加/编辑分销等级</h3>
	</div>
	<div class="item">
		<h3>等级佣金比例</h3>
		<div style="margin-bottom: 40px;">
			<el-form-item  label="等级权重" label-width="120" required>
				<div class="showbutton">
					<el-button v-for="(x,index) in levels"
					:key="index"
					:class="{ active: selectedLevel === x }"
					
					@click="selectLevel(x,index)"
					>{{x}}</el-button>
					<p>等级权重越大，等级越高</p>
				</div>
			</el-form-item>
			<!-- <el-button>{{}}</el-button> -->
			
		</div>
		<el-form-item label="等级名称" label-width="120" required>
			
			<el-input v-model="input1" style="width: 240px" placeholder="请输入等级名称">
			
			</el-input>
		
		</el-form-item>
		<el-form-item label="一级分销比例" label-width="120" required>
			<div>
				<el-input v-model="input2" style="width: 240px" placeholder="请输入一级分销等级">
					<template #append>%</template>
				</el-input>
				<p>会员购买后给当前等级分销商的佣金比例</p>
			</div>
		</el-form-item>
		
		<el-form-item label="二级分销比例" label-width="120" required>
			<div>
				<el-input v-model="input3" style="width: 240px" placeholder="请输入二级分销等级">
					<template #append>%</template>
				</el-input>
				<p>会员购买后给当前等级分销商的上级分销商的佣金比例</p>
			</div>
		</el-form-item>
		
		<h3>升级条件</h3>
		<el-form-item label="升级方式" size="14" required>
			<div>
				<el-radio-group v-model="menuType">
					<el-radio value="0" size="large">满足以下任意条件</el-radio>
					<el-radio value="1" size="large">满足以下全部条件</el-radio>
				</el-radio-group>
			</div>
			<div>
				<el-button>一级分销订单总数</el-button>
				<el-button>一级分销订单总额</el-button>
				<el-button>自购订单总数</el-button>
				<el-button>自购订单总额</el-button>
				<el-button>一级下线人数</el-button>
				<el-button>一级下线分销商</el-button>
			</div>

		</el-form-item>
		<h3>升级条件限制</h3>
		<el-form-item>
			
		</el-form-item>
		<div style="text-align: center;">
			<el-button type="primary" @click="save">保存</el-button>
			<el-button @click="goback">返回</el-button>
		</div>
	</div>
</template>

<script setup>
	import {
		defineEmits,
		onMounted,
		reactive,
		ref
	} from 'vue';
	import { ElMessage, ElMessageBox } from 'element-plus'
	import { EditPen,ArrowLeft } from '@element-plus/icons-vue'
	import {
		addLevel,
		updateLevel,
		disLevellist
	} from "@/api"
	import {
		number
	} from 'echarts';
	let pageIndex=ref(1);
	let pageSize=10;
	const levels = ['一级', '二级', '三级', '四级', '五级', '六级', '七级', '八级'];
	const selectedLevel = ref('一级');
	const menuType=ref()
	const grade=ref(0)
	const selectLevel = (x,index) => {
		selectedLevel.value = x;
		grade.value=index;
		// console.log(grade.value);
	};
	const message = ref(true)
	const emit = defineEmits(['update-message']);
	const goback = async () => {
		emit('update-message', message);
		sessionStorage.removeItem("leveldetail")
	}
	let listlength=ref()
	const getLevelList= async()=>{
		let res= await disLevellist({
			pageIndex:pageIndex.value,
			pageSize:pageSize,
			siteId:Number(sessionStorage.getItem("siteId")),
		})
		// console.log("添加分销等级的等级列表",res);
		listlength.value=res.list.length
		// console.log(listlength.value);
	}

	let reg=/^[1-9][0-9]$/
	const save = async () => {
		if(input1.value==null){
			ElMessage({
				message:"等级名称不可为空",
				type:"error"
			})
		}
		else if(input2.value==null || !reg.test(input2.value)){
			ElMessage({
				message:"一级分销比例不可为空，且是小于100数字",
				type:"error"
			})
		}
		else if(input3.value==null || !reg.test(input3.value)){
			ElMessage({
				message:"二级分销比例不可为空，且是小于100数字",
				type:"error"
			})
		}else if(menuType.value==null){
			ElMessage({
				message:"请选择升级条件",
				type:"error"
			})
		}
		
		else if (sessionStorage.getItem("leveldetail")) {
			//修改
			let data = reactive({})
			data = JSON.parse(sessionStorage.getItem("leveldetail"))
			let res = await updateLevel({
				distributionLevelId: data.distributionLevelId,
				levelGrade: grade.value,
				levelName: input1.value,
				firstLevel: Number(input2.value),
				secondLevel: Number(input3.value),
				upscoreType: menuType.value,
				siteId: Number(sessionStorage.getItem("siteId")),
			})
			// console.log(grade.value);
			if(typeof(res)=="object"){
				ElMessage({
				    message:"保存成功",
				    type: 'success',
				})
			setTimeout(()=>{
				emit('update-message', message);
			},500)
			}
			sessionStorage.removeItem("leveldetail")
			// console.log("修改分销等级", res)
			
		} else {
			//添加
			let res = await addLevel({
				levelGrade:String(grade.value),
				levelName: input1.value,
				firstLevel: Number(input2.value),
				secondLevel: Number(input3.value),
				upscoreType:menuType.value,
				siteId: Number(sessionStorage.getItem("siteId")),
			})
			// console.log("添加分销等级", res)
			if(typeof(res)=="object"){
				ElMessage({
				    message:"保存成功",
				    type: 'success',
				})
				
				// grade.value=''
				// input1=''
				// input2=''
				// input3=''
				// menuType=''
				// console.log("添加分销等级", res)
				setTimeout(()=>{
					emit('update-message', message);
				},500)
			}
		}
	}

	let input1 = ref()
	let input2 = ref()
	let input3 = ref()

	onMounted( async() => {
		await getLevelList()
		
		if (sessionStorage.getItem("leveldetail")) {
			input1.value = JSON.parse(sessionStorage.getItem("leveldetail")).levelName
			input2.value = JSON.parse(sessionStorage.getItem("leveldetail")).firstLevel
			input3.value = JSON.parse(sessionStorage.getItem("leveldetail")).secondLevel
			// input3.value = JSON.parse(sessionStorage.getItem("leveldetail")).secondLevel
			selectedLevel.value=levels[Number(JSON.parse(sessionStorage.getItem("leveldetail")).levelGrade)]
			grade.value=Number(JSON.parse(sessionStorage.getItem("leveldetail")).levelGrade)
			menuType.value=JSON.parse(sessionStorage.getItem("leveldetail")).upscoreType
		}else{
			// console.log(listlength.value);
			selectedLevel.value=levels[listlength.value]
			grade.value=listlength.value
		}
	})
</script>

<style lang="less" scoped>
	h3 {
		// margin-left: 30px;
		margin-bottom: 50px;
	}
	.el-button{
		margin-left: 0px;
		margin-right: 15px;
	}
	.item {
		margin-left: 50px;
	}
	.el-form-item {
		margin-bottom: 40px;
		display: flex;
		// flex-direction: column;
	}
	.showbutton .el-button{
		display: none;
	}
	.active{
		display: inline-block !important;
		background-color: #ccc;
	}
	.el-input__wrapper {
		margin-right: 0px;
	}
</style>